import OceanComponent from './OceanComponent';
import OFormItem from '../../components/FormItem.vue';
import FormItemComponent from '../common/formItem';
import {
  FormItemProps,
  InputProps,
  InputNumberProps,
  SelectProps,
  AutoCompleteProps,
  CascaderProps,
  CheckboxProps,
  RadioProps,
  DatePickerProps,
  TimePickerProps,
  SwitchProps,
  TreeSelectProps,
  DynamicInputProps,
  SliderProps
} from '../common/props';
import { Ref } from 'vue';

type R<T> = {
  [P in keyof T]: T[P] | Ref<T[P]>;
};

type FormComponentType = InputProps | SelectProps;

class FormComponent<T> extends OceanComponent<T> {
  isOceanComponent: boolean = false;
  constructor(component, attrs?: T, _attrs?: T) {
    super(component, attrs, _attrs);
  }
}

class FormItem<T = any> extends OceanComponent<FormItemProps> {
  component: FormComponent<FormComponentType>;
  label: string;
  key: keyof T;
  constructor(label: string, key: keyof T, attrs: Omit<FormItemProps, 'label'> = {}) {
    super(OFormItem, attrs, { show: true });
    this.label = label;
    this.key = key;
  }
  define<T>(c: keyof typeof FormItemComponent | __VueComponent | OceanComponent, attrs?: T) {
    if (c.isOcean) {
      this.component = c;
      return this;
    }
    const component = typeof c === 'string' ? FormItemComponent[c] : c;
    this.component = new FormComponent<T>(component, attrs, {
      placeholder: '请填写' + this.label
    } as any);
    return this;
  }
  input(attrs?: R<InputProps>) {
    return this.define<typeof attrs>('Input', attrs);
  }
  inputNumber(attrs?: R<InputNumberProps>) {
    return this.define<typeof attrs>('InputNumber', attrs);
  }
  select(attrs?: R<SelectProps>) {
    return this.define<typeof attrs>('Select', attrs);
  }
  checkbox(attrs?: R<CheckboxProps>) {
    return this.define<typeof attrs>('Checkbox', attrs);
  }
  radio(attrs?: R<RadioProps>) {
    return this.define<typeof attrs>('Radio', attrs);
  }
  date(attrs: R<DatePickerProps> = {}) {
    return this.define<typeof attrs>('DatePicker', attrs);
  }
  time(attrs?: R<TimePickerProps>) {
    return this.define<typeof attrs>('TimePicker', attrs);
  }
  switch(attrs?: R<SwitchProps>) {
    return this.define<typeof attrs>('Switch', attrs);
  }
  treeSelect(attrs?: R<TreeSelectProps>) {
    return this.define<typeof attrs>('TreeSelect', attrs);
  }
  dynamicInput(attrs?: R<DynamicInputProps>) {
    return this.define<typeof attrs>('DynamicInput', attrs);
  }
  cascader(attrs?: R<CascaderProps>) {
    return this.define<typeof attrs>('Cascader', attrs);
  }
  slider(attrs?: R<SliderProps>) {
    return this.define<typeof attrs>('Slider', attrs);
  }

  getAttrs() {
    return [this.attrs, this.component?.attrs];
  }
}

export default FormItem;
